<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>库存列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        body{
            font-size: 14px;
            background: #f3f3ff;
        }
        .aui-content{
            margin: 0;
        }
        .my-list{
            width: 100%;
            text-align: center;
            overflow: hidden;
            margin: 0;
            color: #000;
        }
        .haderUl li:after{
            border: none !important;
        }
        .my-list li{
            padding: 0 15px;

        }
        .my-list li span{
            float: left;
            display: block;

        }
        .my-list li span:nth-of-type(1),.my-list li span:nth-of-type(3){
            width: 12%;
        }
        .my-list li span:nth-of-type(2){
            width: 76%;
            text-overflow: ellipsis;
            white-space:nowrap;
            overflow: hidden;

        }
        /*.my-list li span:before{*/
            /*content:"";*/
            /*position: absolute;*/
            /*-webkit-transform: scale(0.5);*/
            /*border-bottom: 1px solid #c8c7cc;*/
            /*bottom: 0;*/
            /*left: -100%;*/
            /*right: -100%;*/
            /*overflow: hidden;*/
        /*}*/
        .my-list li{
            line-height: 45px;
            height: 45px;
        }
        .my-list li:nth-of-type(odd){
            background: #f8fdff;
        }
        .my-list li:first-of-type{
            background: #fff;
        }
        .contains{
            position: relative;
        }
        .aui-content{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .lists{
            position: absolute;
            width: 100%;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav ">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">
        库存列表
    </div>
    <ul class="aui-list-view my-list haderUl aui-border-t">
        <li class="aui-list-view-cell th" >
            <span>编号</span>
            <span>商品名</span>
            <span>库存</span>
        </li>
    </ul>
</header>
<div class="contains">
    <div class="aui-content">
        <div class="lists">
            <div id="scroller-pullDown">
                <span class="aui-iconfont aui-icon-refresharrow downIcon">
                </span>
                <span id="pullDown-msg" class="pull-down-msg ">下拉刷新</span>
            </div>
            <ul class="aui-list-view my-list ">
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
                <li class="aui-list-view-cell" >
                    <span>115</span>
                    <span>商品名商品名商品名商品名商商品名商品名商品名商品名商品名商品名商品名品名商品名商品名</span>
                    <span>558</span>
                </li>
            </ul>

            <div id="scroller-pullUp">
                <i class="aui-iconfont aui-icon-refresharrow upIcon"></i>
                <span id="pullUp-msg" class="pull-up-msg"> 上拉刷新</span>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/iscroll2.js"></script>
<script type="text/javascript">
    var imgBase64,myScroll;
    apiready = function() {
        api.parseTapmode();
    }
    $(function () {
        var containH=$("body").height()-$("header").height();
        $(".contains").height(containH);
        setTimeout(function () {
            scroll();
        },200)
    })
    function scroll() {
        myScroll=new IScroll(".aui-content",{
            mouseWheel:true,
            probeType:3,
            click:true
        })
        var upIcon = $(".downIcon"),
            downIcon = $(".upIcon");
        myScroll.on("scroll",function(){
            var y = this.y,
                maxY = this.maxScrollY - y,
                downHasClass = downIcon.hasClass("reverse_icon"),
                upHasClass = upIcon.hasClass("reverse_icon");
            if(y >= 40 && !downHasClass){
                $(".downIcon").addClass("turnUp");
                downIcon.addClass("reverse_icon");
                $(".pull-down-msg").text("松手刷新");
                return "";
            }else if(y < 5 && downHasClass){
                $(".downIcon").removeClass("turnUp");
                downIcon.removeClass("reverse_icon");
                $(".pull-down-msg").text("下拉刷新");
                return "";
            }

            if(maxY >= 40 && !upHasClass){
                $(".upIcon").addClass("turnDown");
                upIcon.addClass("reverse_icon");
                $(".pull-up-msg").text("松手刷新");
                return "";
            }else if(maxY < 5 && upHasClass){
                $(".upIcon").removeClass("turnDown");
                upIcon.removeClass("reverse_icon");
                $(".pull-up-msg").text("上拉刷新");
                return "";
            }
        });

        myScroll.on("slideDown",function(){
            //下拉刷新
            if(this.y > 40){
                //添加数据
                myScroll.refresh();
                api.toast({
                    msg:"数据加载成功"
                })
            }
        });

        myScroll.on("slideUp",function(){
            //上拉刷新
            if(this.maxScrollY - this.y > 40){
                //添加数据
                myScroll.refresh();
                api.toast({
                    msg:"数据加载成功"
                })
            }
        });

    }
</script>
</html>